<template>

    <!-- 搜索栏 -->
    <div class="box">
        <div class="head">
            <p><span class="icon-daohangdizhi iconfont"></span>解放八号</p>
            <p class="p1"><span class="iconfont icon-saoyisao"></span><span class="iconfont icon-ico"></span><span
                    class="iconfont icon-xinxi"></span></p>
        </div>
        <div class="inp">
            <span class="iconfont icon-sousuoxiao"></span>
            <input type="text" placeholder="盒马电子卡">
            <button>搜索</button>
        </div>
    </div>
    <!-- 轮播图 -->
    <div class="img">
        <img src="../assets/images/08.jpg" alt="">
    </div>
    <div class="body">
        <!-- 分类区 -->
        <div class="box2">
            <HeaderMain :todoList="todoList" />
        </div>
        <!-- 提示区 -->
        <div class="tips">
            <span class="iconfont icon-lingdang"></span>
            <p>受全国各地疫情管控影响，部分订单可能会延迟...</p>
            <p class="iconfont icon-youjiantou1"></p>
        </div>
        <div class="banner">
            <HeaderBanner/>
        </div>
        <!--  活动区  -->
        <div class="card">
           <HeaderPage :List="List"/>
        </div>
        <!-- 商品区 -->
        <div class="main">
            <HeaderGoods/>
        </div>

    </div>


</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue'
import HeaderMain from "./HeaderMain.vue"
import HeaderBanner from './HeaderBanner.vue'
import HeaderPage from './HeaderPage.vue'
import HeaderGoods from "./HeaderGoods.vue"
export default defineComponent({
    setup() {

        const todoList = reactive([
            {
                id: '01',
                name: '时令水果',
                img: require("@/assets/images/001.jpg")
            },
            {
                id: '02',
                name: '新鲜蔬菜',
                img: require("@/assets/images/002.jpg")
            },
            {
                id: '03',
                name: '海鲜水产',
                img: require("@/assets/images/003.jpg")
            },
            {
                id: '04',
                name: '肉禽蛋品',
                img: require("@/assets/images/004.jpg")
            },
            {
                id: '05',
                name: '食品干货',
                img: require("@/assets/images/005.jpg")
            },
            {
                id: '06',
                name: '美妆个护',
                img: require("@/assets/images/006.jpg")
            },
            {
                id: '07',
                name: '母婴百货',
                img: require("@/assets/images/007.jpg")
            },
            {
                id: '08',
                name: '保健滋补',
                img: require("@/assets/images/008.jpg")
            },
            {
                id: '09',
                name: '中外名酒',
                img: require("@/assets/images/009.jpg")
            },
            {
                id: '010',
                name: '彩妆时尚',
                img: require("@/assets/images/010.jpg")
            },
        ])

        const List = reactive([
            {
                id:'01',
                names:'农家散养',
                name:'超盒算',
                src:require("@/assets/images/6.jpg"),
                img:require("@/assets/images/7.jpg"),
                money:'惠',
                title:'￥68'
            },
            {
                id:'02',
                names:'全球大牌',
                name:'跨境GO',
                src:require("@/assets/images/8.jpg"),
                img:require("@/assets/images/9.jpg"),
                money:'惠',
                title:'￥258'
            },
            {
                id:'03',
                names:'品一锅鲜',
                name:'码头寻鲜',
                src:require("@/assets/images/10.jpg"),
                img:require("@/assets/images/11.jpg"),
                money:'惠',
                title:'￥92'
            },
            {
                id:'04',
                names:'果园飘香',
                name:'基地鲜果',
                src:require("@/assets/images/12.jpg"),
                img:require("@/assets/images/13.jpg"),
                money:'惠',
                title:'￥49.9'
            },
        ])
        return {
            todoList,
            List,
        }
    },
    components: {
        HeaderMain,
        HeaderBanner,
        HeaderPage,
        HeaderGoods,
    }
})
</script>

<style scoped>
.body {
    background-color: #F7F7F7;
    padding: 0 10px;
    margin-bottom: 70px;
}

.box {
    background-color: #F0AA55;
}

.head {
    color: white;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;


}

.p1 {
    width: 100px;
    display: flex;
    justify-content: space-around;
}


/* 搜索框 */
.inp {
    width: 100%;
    border-radius: 30px;
    height: 30px;
    color: #B1B0B5;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: white;


}

input {
    width: 70%;
    border: none;
    outline: none;
}

button {
    width: 20%;
    line-height: 26px;
    border-radius: 20px;
    background-color: #F0AA55;
    color: white;
    text-align: center;
    border: none;
}

/* 轮播图 */

.img img {
    width: 100%;
    height: 200px;

}

/* 分类区 */
.box2 {
    height: 220px;
    width: 100%;
    background-color: #F7F7F7;
    margin-top: -3px;
    position: relative;
}

/* 提示区 */
.tips {
    width: 100%;
    height: 40px;
    border-radius: 15px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    background-color: #FFF7EC;
    margin: 10px 0;
    overflow: hidden;
    font-size: 15px;
}
.tips span{
    display:inline-block;
    width: 30px;
    line-height: 40px;
    background-color: #FEAE1A;
    text-align: center;
    color: white;
    
}
.tips p:first-child{
    display: flex;
    flex-wrap: nowrap;
}
.tips p:last-child{
    width: 20px;
    height: 20px;
    border: 2px solid #EFEBC5;
    border-radius: 50%;
    color: #FEAE1A;
    font-size: 18px;
    font-weight: 600;
}
/* 食在当季 */
.banner{
    background-image: linear-gradient(#FDC39E 0%,#FFDAC7 100%);
    border-radius: 15px;
    height: 200px;
    width: 100%;
    overflow: hidden;
}

</style>